<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <link rel='stylesheet' href='<%- rootUrl %>/res/adapter.css' />
    <link rel='stylesheet' href='<%- rootUrl %>/res/taginput.css' />
    <link rel='stylesheet' href='<%- rootUrl %>/node_modules/ckeditor-full/contents.css' />
    <link rel='stylesheet' href='<%- rootUrl %>/node_modules/font-awesome/css/font-awesome.min.css' />
    <style>
        .detailInfo{display:none;background-color: #eeeeee}
    </style>
    <script src="<%- rootUrl %>/node_modules/jquery/dist/jquery.min.js"></script>
    <script src="<%- rootUrl %>/node_modules/ckeditor-full/ckeditor.js"></script>
    <script src="<%- rootUrl %>/res/adapter.js"></script>
    <script src="<%- rootUrl %>/res/taginput.js"></script>
    <title><%- edit ? '编辑' : (reproduce ? '转载' : '发表') %>文章</title>
</head>
<body class="body-margin">
<alljs-widget><message-top><%- message %></message-top></alljs-widget>
<form class="common-style auto-input-width" method="post" action="./articlecommit" onsubmit="return submitCheck()" onkeypress="return event.keyCode !== 13;">
    <h2 style="display:inline;vertical-align: middle"><b><%- edit ? '编辑' : (reproduce ? '转载' : '发表') %>文章</b></h2>
    <input type="hidden" name="_id" value="<%= _id %>" />
    <table>
        <tr><td colspan="2"><p><b>文章信息</b>&emsp;<i class="fa fa-chevron-down" onclick="switchDetail(this)" style="color:grey"></i></p></td></tr>
        <tr><td>标题</td><td><input type="text" name="title" value="<%= title %>" />(必填)</td></tr>
        <tr class="detailInfo"><td>副标题</td><td><input type="text" name="subtitle" value="<%= subtitle %>" /></td></tr>
        <tr><td>类别</td>
            <td><select name="mainclass">
                <% for (let descendantBlock of descendantBlocks){ %>
                <option value="<%= descendantBlock.path %>" <%- (descendantBlock.path===block ?'selected':'') %> ><%- blocksDic[descendantBlock.path] %></option>
                <% } %>
            </select>(必填)</td>
        </tr>
        <tr class="detailInfo"><td>子类别</td><td><input type="text" name="subclass" value="<%= subclass %>" /></td></tr>
        <tr><td>关键词</td><td><input type="text" class="tag-input like-input" name="keywords" value="<%= keywords %>" placeholder=", ; 分隔多值" /></td></tr>
        <tr><td>发表人</td><td><input type="text" name="author" value="<%= author %>" /></td></tr>
        <tr><td>发表时间</td><td><input type="datetime-local" name="publish" value="<%= publish %>" /></td></tr>
        <tr><td>转载URL</td><td><input type="text" name="produceUrl" value="<%= produceUrl %>" /></td></tr>
        <tr><td colspan="2"><hr/></td></tr>
        <tr><td>验证码</td><td>
            <input type="text" name="captcha" style="width:20%" />
            <img id="captcha-img" style="vertical-align: middle; margin:5px" height="32" onclick="this.setAttribute('src','./captcha?'+new Date().getTime())" />
            <img src="<%- rootUrl %>/res/right2.gif" height="21" style="vertical-align: middle;margin:5px" />
            <input type="submit" style="margin:5px" />
            <button type="button" style="margin:5px" onclick="if (history.length > 0) history.go(-1); else close();void(0)">取消</button>
        </td></tr>
        <tr><td colspan="2"><hr/></td></tr>
    </table>
    <input id="articlecontent" type="hidden" name="content" value="<%= content %>" />
    <input id="articlebrief" type="hidden" name="brief" value="<%= brief %>" />
</form>
<p>
    <b>文章内容</b>&emsp;<i class="fa fa-chevron-up" onclick="switchContent(this)" style="color:grey;margin-right:20px"></i>
    <b>文章预览</b>&emsp;<i class="fa <%- reproduce ? 'fa-chevron-up':'fa-chevron-down' %>" onclick="switchPreview(this)" style="color:grey"></i>
</p>
<div id="ckeditor"></div>
<div id="previewPanel" style="display: none">
    <hr/>
    <div id="preview"></div>
</div>
<script>
document.getElementById('captcha-img').onclick();
var hidedetail=true;
var switchDetail = function(sender){
    if (hidedetail){
        $(sender).removeClass('fa-chevron-down');
        $(sender).addClass('fa-chevron-up');
        $('.detailInfo').css('display','table-row');
        hidedetail=false;
    }else{
        $(sender).removeClass('fa-chevron-up');
        $(sender).addClass('fa-chevron-down');
        $('.detailInfo').css('display','none');
        hidedetail=true;
    }
};
var hidecontent='<%- reproduce %>' === 'true';
var switchContent = function(sender){
    if (hidecontent){
        $(sender).removeClass('fa-chevron-down');
        $(sender).addClass('fa-chevron-up');
        $('#ckeditor').next().css('display','');
        hidecontent=false;
    }else{
        $(sender).removeClass('fa-chevron-up');
        $(sender).addClass('fa-chevron-down');
        $('#ckeditor').next().css('display','none');
        hidecontent=true;
    }
};
var hidepreview=true;
var switchPreview = function(sender){
    if (hidepreview){
        $(sender).removeClass('fa-chevron-down');
        $(sender).addClass('fa-chevron-up');
        $('#previewPanel').css('display','block');
        $('#preview').html(CKEDITOR.instances.ckeditor.getData());
        hidepreview=false;
    }else{
        $(sender).removeClass('fa-chevron-up');
        $(sender).addClass('fa-chevron-down');
        $('#previewPanel').css('display','none');
        hidepreview=true;
    }
};
var editor = CKEDITOR.replace('ckeditor',{
    toolbar : 'Article'
});

editor.on('change', function( event ) {
    if (!hidepreview)
        $('#preview').html(this.getData());
});
editor.setData($('#articlecontent').val());

$(function(){ setTimeout(function(){
    if (hidecontent)
        $('#ckeditor').next().css('display','none');
}, 300);});

var submitCheck = function(){
    let data = CKEDITOR.instances.ckeditor.getData();
    data = window.handleCKEditorData(data);
    $('#articlecontent').val(data);
    let txt = window.getText(data);
    $('#articlebrief').val(txt.length > 80 ? txt.substr(0, 80) + '...' : txt);

	let title = $('input[name=title]').val();
    if (typeof(title) !== 'string' || title.replace(/\s/g, '') === ''){
        showMessage('文章标题为空');
        return false;
    }
    return true;
}
</script>
</body>
</html>